<template>
  <div class="data">
    <el-row :gutter="20" style="width: 100%">
      <el-col :span="12">
        <el-form label-width="120px" :model="myHeadinfo">
          <fieldset class="fieldset">
            <legend class="legend">表头信息输入</legend>
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="12"
                ><el-form-item label="壳体批号">
                  <el-input
                    v-model="myHeadinfo.ktph"
                    placeholder="请输入壳体批号"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12">
                <el-form-item label="试验介质">
                  <el-input
                    v-model="myHeadinfo.syjz"
                    placeholder="请输入试验介质"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="报告编号">
                  <el-input
                    v-model="myHeadinfo.bgbh"
                    placeholder="请输入报告编号"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="介质温度">
                  <el-input
                    v-model="myHeadinfo.jzwd"
                    placeholder="请输入介质温度"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="材料牌号">
                  <el-input
                    v-model="myHeadinfo.clph"
                    placeholder="请输入材料牌号"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="压力表精度">
                  <el-input
                    v-model="myHeadinfo.ylbjd"
                    placeholder="请输入压力表精度"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="材料代号批号">
                  <el-input
                    v-model="myHeadinfo.cldhph"
                    placeholder="请输入材料代号批号"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="压力表编号">
                  <el-input
                    v-model="myHeadinfo.ylbbh"
                    placeholder="请输入压力表编号"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="热处理状态度">
                  <el-input
                    v-model="myHeadinfo.rclzt"
                    placeholder="请输入热处理状态"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="压力表检验日期">
                  <!-- <el-input
                    v-model="myHeadinfo.ylbjyrq"
                    placeholder="请输入压力表检验日期"
                    
                  ></el-input>  -->
                  <el-date-picker
                    v-model="myHeadinfo.ylbjyrq"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker></el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="公称压力">
                  <el-input
                    v-model="myHeadinfo.gcyl"
                    placeholder="请输入公称压力"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="压力表表盘直径">
                  <el-input
                    v-model="myHeadinfo.ylbbpzj"
                    placeholder="请输入压力表表盘直径"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="试验压力">
                  <el-input
                    v-model="myHeadinfo.syyl"
                    placeholder="请输入试验压力"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"> </el-col>
              <el-col :span="12"
                ><el-form-item label="保压时间">
                  <el-input
                    v-model="myHeadinfo.bysj"
                    placeholder="请输入保压时间"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12">
                <div style="margin-left: auto">
                  <el-button type="primary" @click="update()">提交</el-button>
                </div>
              </el-col>
            </el-row>
          </fieldset>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form
          label-width="120px"
          :model="myHeadinfo"
          v-loading="testResult.state == '1'"
        >
          <fieldset class="fieldset">
            <legend class="legend">
              当前试验结果:{{ testResult.categorize }}
            </legend>
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="12"
                ><el-form-item label="壳体编号">
                  <el-input
                    v-model="testResult1.ktbh"
                    placeholder="请输入壳体编号"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12">
                <el-form-item label="试验结果">
                  <el-input
                    v-model="testResult.syjg"
                    placeholder="请输入试验结果"
                    readonly
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="试验压力">
                  <el-input
                    v-model="testResult.syyl"
                    placeholder="请输入试验压力"
                    readonly
                  >
                    <template #append>MPa</template>
                  </el-input>
                </el-form-item></el-col
              >
              <el-col :span="12"
                ><el-form-item label="试验员">
                  <el-input
                    v-model="testResult1.syy"
                    placeholder="请输入试验员"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="保压时间">
                  <el-input
                    v-model="testResult.bysj"
                    placeholder="请输入保压时间"
                    readonly
                  >
                    <template #append>S</template>
                  </el-input>
                </el-form-item></el-col
              >
              <el-col :span="12"
                ><el-form-item label="检验员">
                  <el-input
                    v-model="testResult1.jyy"
                    placeholder="请输入检验员"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="24"
                ><el-form-item label="渗漏情况">
                  <el-input
                    v-model="testResult1.slqi"
                    placeholder="请输入渗漏情况"
                    type="textarea"
                  ></el-input> </el-form-item
              ></el-col>

              <el-col :span="24"
                ><el-form-item label="宏观变形情况">
                  <el-input
                    v-model="testResult1.hgbxqk"
                    placeholder="请输入宏观变形情况"
                    type="textarea"
                  ></el-input> </el-form-item
              ></el-col>

              <el-col :span="24"
                ><el-form-item label="异常情况">
                  <el-input
                    v-model="testResult1.ycqk"
                    placeholder="请输入异常情况"
                    type="textarea"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="4">
                <div style="margin-left: auto">
                  <el-button type="primary" @click="saveUpdate()"
                    >提交</el-button
                  >
                </div>
              </el-col>
              <el-col :span="20">
                <div class="flex">
                  <div style="width: 250px" class="mr-4">
                    <el-select
                      v-model="categorize.pch"
                      filterable
                      clearable
                      placeholder="选择批次"
                      @change="changeName()"
                    >
                      <el-option
                        v-for="item in categorizes"
                        :key="item"
                        :label="
                          format(
                            new Date(parseInt(item.pch)),
                            'yyyy-MM-dd HH:mm:ss'
                          ) +
                          '-' +
                          item.name
                        "
                        :value="item.pch"
                      ></el-option>
                    </el-select>
                  </div>

                  <el-button type="info" @click="pdf()" class="mr-4"
                    >导出报告</el-button
                  >
                  <el-button
                    type="primary"
                    @click="loadCategorize()"
                    class="mr-4"
                    >刷新</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </fieldset>
        </el-form>
      </el-col>
    </el-row>
    <div class="mb-10">
      <div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="testResultPage.ktbh"
              placeholder="请输入壳体编号"
            ></el-input>
          </el-col>

          <el-col :span="6">
            <el-input
              v-model="testResultPage.bysj"
              placeholder="请输入保压时间"
            >
              <template #append>S</template>
            </el-input></el-col
          >
          <el-col :span="6">
            <el-input
              v-model="testResultPage.slqi"
              placeholder="请输入渗漏情况"
            ></el-input
          ></el-col>
          <el-col :span="6">
            <el-date-picker
              v-model="PagestartEndTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="试验开始时间"
              end-placeholder="试验结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="testResultPage.ycqk"
              placeholder="请输入异常情况"
            ></el-input
          ></el-col>
          <el-col :span="6">
            <el-select
              v-model="testResultPage.syjg"
              filterable
              clearable
              placeholder="选择试验结果"
            >
              <el-option label="OK" value="OK"></el-option>
              <el-option label="NO" value="NO"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="testResultPage.syy"
              placeholder="请输入试验员"
            ></el-input
          ></el-col>
          <el-col :span="6">
            <el-input
              v-model="testResultPage.jyy"
              placeholder="请输入检验员"
            ></el-input
          ></el-col>
          <el-col :span="6"
            ><div>
              <el-select
                v-model="testResultPage.categorize"
                filterable
                clearable
                placeholder="选择类目"
              >
                <el-option label="球阀" value="球阀"></el-option>
                <el-option label="电磁阀" value="电磁阀"></el-option>
                <el-option label="蓄能器" value="蓄能器"></el-option>
                <el-option label="耐疲劳" value="耐疲劳"></el-option>
                <el-option label="精度" value="精度"></el-option>
              </el-select></div
          ></el-col>
          <el-col :span="6"
            ><div>
              <el-button type="primary" @click="laodFindMyTestresultPage()"
                >查询</el-button
              >
            </div></el-col
          >
        </el-row>
      </div>
    </div>
    <div class="mb-40">
      <el-table
        :data="testResultList"
        border
        style="width: 100%"
        height="500px"
        v-loading="loading"
      >
        <el-table-column label="ID" width="80" prop="id" />
        <el-table-column label="壳体编号" width="100" prop="ktbh" />
        <el-table-column label="试验结果" width="100" prop="syjg" />
        <el-table-column label="试验压力" width="100" prop="syyl" />
        <el-table-column label="试验员" width="100" prop="syy" />
        <el-table-column label="保压时间" width="100" prop="bysj">
          <template #default="{ row }">
            <span> {{ row.bysj }}S </span>
          </template>
        </el-table-column>
        <el-table-column label="检验员" width="100" prop="jyy" />
        <el-table-column label="类目" width="100" prop="categorize" />
        <el-table-column label="渗漏情况" width="100" prop="slqi">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.slqi" placement="top"
              >{{ row.slqi?.substring(0, 10) }}
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="宏观变形情况" width="200" prop="hgbxqk">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.ycqk" placement="top"
              >{{ row.hgbxqk?.substring(0, 10) }}
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="异常情况" width="150" prop="ycqk">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.ycqk" placement="top"
              >{{ row.ycqk?.substring(0, 10) }}
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="试验时间" width="150" prop="crateTime" />
        <el-table-column label="批次号" prop="pch" />
      </el-table>
      <div class="mt-4 flex justify-center items-center">
        <el-pagination
          style="margin: 0 auto"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="testResultPage.page"
          :page-size="testResultPage.limit"
          @current-change="handlePage"
        >
        </el-pagination>
      </div>
    </div>
    <div class="mb-10 flex">
      <div class="flex">
        <el-radio-group v-model="type1">
          <el-radio :value="0">
            <div class="mr-10">
              <el-date-picker
                v-model="startEndTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
              /></div
          ></el-radio>
          <el-radio :value="1"
            ><div style="background-color: antiquewhite" class="px-4 mr-10 two">
              <el-radio-group v-model="type2" fill="#ccc">
                <el-radio :value="7">7天</el-radio>
                <el-radio :value="15">15天</el-radio>
              </el-radio-group>
            </div></el-radio
          >
        </el-radio-group>
      </div>

      <div style="width: 120px" class="mr-4">
        <el-select
          v-model="myData.categorize"
          filterable
          clearable
          placeholder="选择类目"
        >
          <el-option label="球阀" value="球阀"></el-option>
          <el-option label="电磁阀" value="电磁阀"></el-option>
          <el-option label="蓄能器" value="蓄能器"></el-option>
          <el-option label="耐疲劳" value="耐疲劳"></el-option>
          <el-option label="精度" value="精度"></el-option>
        </el-select>
      </div>

      <el-button type="primary" @click="search()">查看</el-button>
      <el-button type="success" @click="excel()">导出 Excel</el-button>
      <el-button type="danger" @click="clear()">清空表</el-button>
    </div>
    <div>
      <el-table
        :data="dataList"
        border
        style="width: 100%"
        height="500px"
        v-loading="loading"
      >
        <el-table-column label="ID" width="80" prop="id" />
        <el-table-column label="分类" width="100" prop="categorize" />
        <el-table-column label="sv标准" width="100" prop="sv" />
        <el-table-column label="压力1" width="100" prop="pv1">
          <template #default="{ row }">
            <span>
              {{ row.pv1 < 0 ? "无效" : row.pv1 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="压力2" width="100" prop="pv2">
          <template #default="{ row }">
            <span>
              {{ row.pv2 < 0 ? "无效" : row.pv2 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="压力3" width="100" prop="pv3">
          <template #default="{ row }">
            <span>
              {{ row.pv3 < 0 ? "无效" : row.pv3 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="压力4" width="100" prop="pv4">
          <template #default="{ row }">
            <span>
              {{ row.pv4 < 0 ? "无效" : row.pv4 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="压力5" width="100" prop="pv5">
          <template #default="{ row }">
            <span>
              {{ row.pv5 < 0 ? "无效" : row.pv5 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="检测时间间隔" width="100" prop="pv5">
          <template #default="{ row }">
            <span>
              {{ row.c6 < 0 ? "无效" : row.c6 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="电磁阀通电次数" width="100" prop="pv5">
          <template #default="{ row }">
            <span>
              {{ row.d7 < 0 ? "无效" : row.d7 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="crateTime">
          <template #default="{ row }">
            <span>
              {{ row.crateTime }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { subDays, format } from "date-fns";
import data from "@/api/data.js";
import ceateWebSocket from "@/utils/websocket.js";
const type1 = ref(1);
const type2 = ref(7);
const startEndTime = ref([]);
const myData = reactive({
  startTime: null,
  endTime: null,
  categorize: null,
});
const categorize = reactive({
  pch: "",
  name: "",
});
const dataList = ref([]);
const categorizes = ref([]);
const loading = ref(false);
const myHeadinfo = ref({});
const dbHeadinfo = ref({});
const testResultPage = reactive({
  ktbh: "",
  bysj: "",
  slqi: "",
  hgbxqk: "",
  ycqk: "",
  syjg: "",
  syy: "",
  jyy: "",
  pageNo: 1,
  pageSize: 10,
});
const PagestartEndTime = ref([]);
const total = ref(0);
const testResult = ref({ state: "1" });
const testResult1 = ref({});
const testResultList = ref([]);
ceateWebSocket(testResult);
const loadData = async () => {
  loading.value = true;
  const res = await data.dataAll(myData);
  dataList.value = res;
  loading.value = false;
};
const loadCategorize = async () => {
  const res = await data.categorizeList();
  categorizes.value = res;
};
const loadGetMyHeadinfoById = async () => {
  const res = await data.getMyHeadinfoById();
  myHeadinfo.value = res;
  dbHeadinfo.value = { ...myHeadinfo.value };
};
const changeName = async () => {
  categorize.name = categorizes.value.find((c) => c.pch == categorize.pch).name;
  console.log(categorize.name);
};
const search = () => {
  if (!type1.value) {
    if (!startEndTime.value || startEndTime.value.length == 0) {
      return ElMessage({
        type: "warning",
        message: "请选择时间范围",
      });
    }
    myData.startTime = startEndTime.value[0];
    myData.endTime = startEndTime.value[1];
  } else {
    const time = new Date();
    myData.startTime = format(
      subDays(time, type2.value),
      "yyyy-MM-dd HH:mm:ss"
    );
    myData.endTime = format(time, "yyyy-MM-dd HH:mm:ss");
  }
  loadData();
};
const excel = () => {
  if (!type1.value) {
    if (!startEndTime.value || startEndTime.value.length == 0) {
      return ElMessage({
        type: "warning",
        message: "请选择时间范围",
      });
    }
    myData.startTime = startEndTime.value[0];
    myData.endTime = startEndTime.value[1];
  } else {
    const time = new Date();
    myData.startTime = format(
      subDays(time, type2.value),
      "yyyy-MM-dd HH:mm:ss"
    );
    myData.endTime = format(time, "yyyy-MM-dd HH:mm:ss");
  }
  data.downLoadExcel(myData, `${myData.categorize || "全部"}.xlsx`);
};

const pdf = () => {
  if (!categorize.pch) {
    return ElMessage({
      type: "warning",
      message: "请选择批次",
    });
  }
  data.downLoadPdf(
    categorize,
    `${
      categorize.name +
      "-" +
      format(new Date(parseInt(categorize.pch)), "yyyy-MM-dd HH:mm:ss")
    }.pdf`
  );
};
const clear = () => {
  data.clearTable();
  loadData();
  loadCategorize();
};
const update = async () => {
  const res = await data.saveupdate(myHeadinfo.value);
  if (res) {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
  }
};
// const getTestResult = async () => {
//   const res = await data.getMyTestresult({ pch: categorize.pch });
//   testResult.value = res;
// };
const saveUpdate = async () => {
  await data.saveUpdate({ ...testResult.value, ...testResult1.value });
  ElMessage({
    type: "success",
    message: "成功",
  });
};

const handlePage = (pno) => {
  testResultPage.pageNo = pno;
  laodFindMyTestresultPage();
};
const laodFindMyTestresultPage = async () => {
  testResultPage.startTime = PagestartEndTime.value[0];
  testResultPage.endTime = PagestartEndTime.value[1];
  const res = await data.findAdminPermissionPage(testResultPage);
  testResultList.value = res.records;
  total.value = Number(res.total);
};
watch(
  () => testResult.value.state,
  () => {
    loadCategorize();
  }
);
onMounted(() => {
  loadCategorize();
  loadGetMyHeadinfoById();
  laodFindMyTestresultPage();
});
</script>
<style lang="scss" scoped>
.two .el-radio__input.is-checked .el-radio__inner {
  border-color: red;
  background: red;
}
.data {
  .fieldset {
    background-color: #f5f7fa;

    border: 1px solid #eee;
    padding: 30px 20px;
    margin-bottom: 20px;
    .legend {
      color: red;
    }
  }
}
[class*="el-col-"].is-guttered {
  margin-bottom: 10px;
}
</style>
